<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect">
        <el-menu-item index="0">RsShopping</el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="1">退出登录</el-menu-item>
    </el-menu>
</template>

<script lang="ts" setup>
import api from '@/api';
import store from '@/store';
import { ElNotification } from 'element-plus';
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const activeIndex = ref('1')
const router = useRouter()
const handleSelect = (key: string, keyPath: string[]) => {
    switch (key) {
        case '0':
            router.push('/showgoods')
            break
        case '1':
            api.admin.signOut()
                .then(response => {
                    // 在这里可以处理提交成功后的逻辑
                    router.push({ path: '/adminlogin' })
                    store.commit('setToken', null)
                    store.commit('setRoleId', null)
                    ElNotification({
                        title: 'Success',
                        message: response.data.msg,
                        type: 'success',
                        duration: 1500
                    })
                })
                .catch(error => {
                    ElNotification({
                        title: 'Error',
                        message: error.data.msg,
                        type: 'error',
                        duration: 1500
                    })
                    // 在这里可以处理提交失败后的逻辑
                });
            break
        default:
            break
    }
}
</script>

<style>
.flex-grow {
    flex-grow: 1;
}
</style>
